<template>
  <div class="" style="height:100%;">
    <div class="ub orderHeader ub-pj bg_w fc_333 fz08">
      <div class="ub ub-ac ub-pc" :class="{selItem:(sel === item.sel)}" v-for="(item, index) in orderPage" @click="chose(item.value, index)">{{item.message}}</div>
    </div>
    <keep-alive>
      <router-view class=""></router-view>
    </keep-alive>
  </div>
</template>

<script type="text/ecmascript-6">
import { mapState } from 'vuex';
export default {
  created: function () {
    this.$store.commit('changeHeader', { // 提交首页header
      left: '返回',
      right: '',
      middle: '航班动态',
      ifshow: true,
      leftAction: '/home',
      leftIcon: 'leftIcon',
      rightAction: '',
      rightIcon: ''
    });
    let orderType = this.allOrders.searchType;
    console.log(orderType);
    // this.$router.push('/allOrders' + this.orderPage[orderType].value);
    this.changePage(orderType);
  },
  data: function () {
    return {
      orderPage: [
        { message: '全部订单', value: '/allOrderList', sel: 0 },
        { message: '待支付', value: '/nopayList', sel: 1 },
        { message: '已支付', value: '/payList', sel: 2 },
        { message: '已出票', value: '/finishList', sel: 3 },
        { message: '已取消', value: '/cancelList', sel: 4 }
      ],
      sel: 0
    }
  },
  components: {
  },
  methods: {
    chose: function (path, index) {
      console.log(path, index)
      this.sel = index;
      this.$store.commit('setSearchType', index); // 状态保持一致
      this.$router.push('/allOrders' + path);
    },
    changePage: function (type) {
      let path = this.orderPage[type].value;
      this.chose(path, type);
    }
  },
  computed: mapState(['loginData', 'allOrders'])
}
</script>

<style lang="stylus">
@import '../../stylus/base.styl';
.orderHeader
  height: f_times(2.5);
  // margin-bottom: f_times(1);
  box-sizing: border-box;
  padding: f_times(0.5);
  border-bottom: solid 1px #e0e0e0;
  .selItem
    position: relative;
    &:after
      content: '';
      position: absolute;
      left: 0;
      bottom: f_times(-0.58);
      width: 100%;
      height: 2px;
      background-color: $bgCol;
</style>